<script setup lang="ts">
import { print } from 'vxe-pc-ui'
import { onMounted, ref } from 'vue'
import type { BusinessUIFormType, DicType } from '@/types/custom'
import { dayjs } from 'element-plus'
import { intToMoney } from '@/utils'
import { useBaseApi } from '@/api/base'
import { formatColumnRows } from '@/utils/custom'
import { Close, Printer, Refresh } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

interface Props {
  uiForm?: BusinessUIFormType
  dicTable?: DicType[]
  _row?: TypedAny
}

const props = defineProps<Props>()
const emit = defineEmits(['close', 'fetch'])

const route = useRoute()
const { CustomRequest } = useBaseApi()

const loading = ref(false)
const printRef = ref()
const info = ref<TypedAny | undefined>()

const printStyle = `
  table td {
    padding: 3px;
  }
  table {
    font-size: 10pt;
  }
`

const printArea = () => {
  print({
    title: route.meta.title,
    html: printRef.value.innerHTML,
    footerHtml: '',
    headerHtml: '',
    customStyle: printStyle,
    showAllPageTitle: false,
    showPageNumber: false
    // content: printRef.value.innerHTML,
    // beforePrintMethod: () => {
    //   return printRef.value.innerHTML
    // }
  })
}

const onFetch = async () => {
  if (!props.uiForm) return Promise.reject(false)
  loading.value = true
  const { data } = await CustomRequest({
    url: props.uiForm.api,
    method: props.uiForm.method,
    params: { id: props._row?.id },
    data: props.uiForm.method === 'post' ? { id: props._row?.id } : {}
  })
  formatColumnRows([data], props.dicTable || [], undefined, props.uiForm)
  // console.log(data)
  info.value = data
  loading.value = false
}

onMounted(() => {
  onFetch()
})
</script>

<template>
  <div v-if="!info" style="width: 100%; height: 40vh" v-loading="true"></div>
  <div ref="printRef" id="print-area" class="print-only" v-else-if="info">
    <header style="text-align: center; font-size: 18pt">其他付款申请单</header>
    <div style="text-align: right; margin-bottom: 5px; font-size: 10pt">
      日期：{{ dayjs(info.app_date).format('YYYY年 MM月 DD日') }}
    </div>
    <table border="1" style="width: 100%; border-collapse: collapse">
      <tr>
        <td style="text-align: center; width: 65px">对应公司</td>
        <td>{{ info.org_name }}</td>
        <td style="text-align: center; width: 65px">项目名称</td>
        <td>{{ info.item_name }}</td>
        <td style="text-align: center; width: 105px">付款单位名称</td>
        <td>{{ info.pay_unit_name_string }}</td>
      </tr>
      <tr>
        <td style="text-align: center">合同号</td>
        <td>{{ info.contract_no }}</td>
        <td style="text-align: center">付款方式</td>
        <td>{{ info.pay_category }}</td>
        <td style="text-align: center">付款单位开户行</td>
        <td>{{ info.pay_bank_name }}</td>
      </tr>
      <tr>
        <td style="text-align: center">申请部门</td>
        <td>{{ info.dep_name }}</td>
        <td style="text-align: center">付款期限</td>
        <td>{{ info.pay_date }}</td>
        <td style="text-align: center">付款单位帐号</td>
        <td>{{ info.pay_bank_number }}</td>
      </tr>
      <tr>
        <td style="text-align: center">申请人</td>
        <td>{{ info.own_user_name }}</td>
        <td style="text-align: center">付款类型</td>
        <td>{{ info.pay_type }}</td>
        <td style="text-align: center">收款单位</td>
        <td>{{ info.accept_unit_name_string }}</td>
      </tr>
      <tr>
        <td style="text-align: center">申请日期</td>
        <td>{{ dayjs(info.app_date).format('YYYY-MM-DD') }}</td>
        <td style="text-align: center">小写金额</td>
        <td>￥{{ info.amt }}</td>
        <td style="text-align: center">收款单位开户行</td>
        <td>{{ info.accept_bank_name }}</td>
      </tr>
      <tr>
        <td style="text-align: center">对应科目</td>
        <td>{{ info.finance_name }}</td>
        <td style="text-align: center">大写金额</td>
        <td>{{ intToMoney(info.amt) }}</td>
        <td style="text-align: center">收款单位帐号</td>
        <td>{{ info.accept_bank_number }}</td>
      </tr>
      <tr>
        <td style="text-align: center">付款用途</td>
        <td colspan="5">{{ info.pay_purpose }}</td>
      </tr>
      <tr>
        <td style="text-align: center" colspan="6">审批明细</td>
      </tr>
      <tr>
        <td colspan="2">经办人：{{ info.wf_users['经办人'] }}</td>
        <td colspan="2">部门经理：{{ info.wf_users['部门经理'] }}</td>
        <td colspan="2">副总经理：{{ info.wf_users['副总经理'] }}</td>
      </tr>
      <tr>
        <td colspan="2">总经理：{{ info.wf_users['总经理'] }}</td>
        <td colspan="2">出纳：{{ info.wf_users['出纳'] }}</td>
        <td colspan="2"></td>
      </tr>
    </table>
  </div>
  <footer class="text-center mt20">
    <el-button :icon="Close" @click="emit('close')">取消打印</el-button>
    <el-button :icon="Refresh" :loading="loading" @click="onFetch">刷新</el-button>
    <el-button @click="printArea" type="primary" :icon="Printer" :loading="loading"
      >确认打印
    </el-button>
  </footer>
</template>

<style>
.print-only table td {
  padding: 3px;
}

.print-only table {
  font-size: 10pt;
}
</style>
